<template>
  <!-- 书写html结构 只可以有一个div 但是可以嵌套多个div -->
  <div>
    <van-sticky>
      <!-- 导航栏 -->
      <van-nav-bar
        title="选择门店"
        left-text=""
        left-arrow
        @click-left="returnTo"></van-nav-bar>

      <!-- 搜索框 -->
      <van-row style="margin-top: 9px">
        <van-col span="21">
          <van-search
            v-model="storeNmae"
            shape="round"
            placeholder="搜索关键词" />
        </van-col>
        <van-col
          span="3"
          style="margin-top: 15px; text-align: left; font-size: 24px"
          ><van-icon name="search" @click="selectAllStore"
        /></van-col>
      </van-row>
    </van-sticky>

    <!-- 列出店铺信息 -->
    <div v-for="item in storeInfo" style="margin-left: 15px" :key="item">
      <van-radio-group v-model="radio">
        <van-radio
          style="margin-top: 18px; margin-bottom: 18px"
          :name="item.storeId"
          >{{ item.storeName }}</van-radio
        >
        <div style="background: #f6f6f6; height: 1px"></div>
        <!-- 确定按钮 -->
        <van-tabbar style="height: 40%">
          <van-col span="24"
            ><van-button
              round
              type="info"
              style="width: 90%"
              @click="chooseStore(radio)"
              >确定</van-button
            ></van-col
          >
        </van-tabbar>
      </van-radio-group>
    </div>
    <div style="height: 333px"></div>
  </div>
</template>
<!--书写组件配置项目  相当于写js代码的地方 -->
<script>
//数据 全是json格式
export default {
  //注册属性 父传子 数据传递
  props: {},
  data() {
    //定义数据
    return {
      storeNmae: "", //搜索框输入的门店名称
      storeInfo: [], //存放店铺信息
      radio: "", //单框的双向绑定
      returnStoreName: "", //确定选择的门店后，返回的门店名称
      
    };
  },
  //初始化数据
  created() {
    this.selectAllStore();
  },
  //方法书写
  methods: {
    //查询门店信息
    selectAllStore() {
      var _this = this;
      console.log("查询门店信息。。。。。");
      this.$http
        .get("/tbStore/selectAllStore?storeName=" + this.storeNmae)
        .then(function (response) {
          console.log(JSON.stringify(response));
          //alert(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.storeInfo = response.data.data; //查询出来的门店信息
          }
        })
        .catch(function (error) {
          console(error);
          _this.$toast.error("你错了。。。");
        });
    },
    

    //确定选择的门店
    chooseStore(radio) {
      //跳转页面时传参
      this.$router.push({
        path: "/Balance",
        query: { storeId: radio },
      });
    },

    //返回上一级
    returnTo() {
      this.$router.push("/Balance");
    },
  },
  //声明注解
  components: {},
};
</script>
<style scoped></style>
